<template>
  <!-- action属性是上传图像的服务器地址 默认以post的方式向这个地址中上传图像 -->
  <!-- <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-reques="upload"
  >
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload> -->
  <el-upload
    class="avatar-uploader"
    action=""
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="upload"
  >
    <img v-if="value" :src="value" class="avatar">
    <template v-else>
      <i v-if="!percent" class="el-icon-plus avatar-uploader-icon" />
      <el-progress v-else type="circle" :percentage="percent" />
    </template>
  </el-upload>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
// 存储桶的 相关信息,  这几个字段准备好, 下午使用这几个字段 往存储桶中存储数据
// 存储桶名称: hmhr18-1305579172
// 存储桶区域: ap-beijing
// SecretId: AKIDW1ObfdScikcHivtbDfy1qRr6kCYqujMy
// SecretKey: ZzITXSJ7tUu67ze8PTJwLTO7ex2sZB87
import COS from 'cos-js-sdk-v5'
// 创建腾讯云cos实例
var cos = new COS({
  SecretId: 'AKIDW1ObfdScikcHivtbDfy1qRr6kCYqujMy',
  SecretKey: 'ZzITXSJ7tUu67ze8PTJwLTO7ex2sZB87'
})
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  // 缺 this.$emit('input',url地址)
  data() {
    return {
      percent: 0
    }
  },
  methods: {
    //  上传图像前校验  这个方法 return true 表示校验通过  return  false 表示校验失败
    beforeAvatarUpload(file) {
      // 通知父组件将staffPhoto清除
      this.$emit('clear')
      // file 文件对象
      // const isJPG = file.type === 'image/jpeg'
      const imgType = ['image/jpeg', 'image/png', 'image/bmp', 'image/gif']
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!imgType.includes(file.type)) {
        this.$message.warning('上传头像图片只能是 jpg/png/bmp/gif格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.warning('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    // 上传头像  file是上传的文件对象
    upload({ file }) {
      // console.log(file)
      cos.putObject(
        {
          Bucket: 'hmhr18-1305579172' /* 填写自己的 bucket，必须字段 */,
          Region: 'ap-beijing' /* 存储桶所在地域，必须字段 */,
          Key:
            file.name +
            Date.now() /* 保证key是唯一的  存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
          Body: file, // 上传文件对象,可以是input[type="file"]标签选择本地文件后得到的file对象
          SliceSize:
            1024 *
            1024 *
            5 /* 触发分块上传的阈值，超过5MB 使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
          onProgress: (progressData) => {
            // 上传期间持续触发的函数
            // console.log(JSON.stringify(progressData))
            this.percent = parseInt(progressData.percent * 100)
          }
        },
        (err, data) => {
          // 上传完毕后触发的函数,有可能成功
          console.log(err || data)
          // console.log(this)
          // 上传成功将data中的Location地址 通知到父组件
          this.$emit('input', 'https://' + data.Location)
        }
      )
    }
  }
}
</script>
